<template>
  <div class="step-content">
    <h3>请选择您的身份</h3>
    <p class="tip">身份选择后不可修改，请谨慎选择</p>

    <div class="identity-options">
      <div
          v-for="option in identityOptions"
          :key="option.value"
          class="identity-option"
          :class="{ active: selectedIdentity === option.value }"
          @click="selectIdentity(option.value)"
      >
        <i :class="option.icon"></i>
        <h4>{{ option.title }}</h4>
        <p>{{ option.description }}</p>
      </div>
    </div>

    <div class="step-buttons">
      <el-button
          type="primary"
          :disabled="!selectedIdentity"
          @click="$emit('next')"
      >
        下一步
      </el-button>
    </div>
  </div>
</template>

<script setup>
import { defineProps, defineEmits } from 'vue'

const props = defineProps({
  selectedIdentity: {
    type: Number,
    default: 0
  }
})

const emit = defineEmits(['update:selectedIdentity', 'next'])

const identityOptions = [
  {
    value: 1,
    title: '老人',
    icon: 'el-icon-user-solid',
    description: '使用健康监测、紧急呼叫等服务'
  },
  {
    value: 2,
    title: '家属',
    icon: 'el-icon-user',
    description: '为老人预约服务、查看健康数据'
  },
  {
    value: 3,
    title: '志愿者',
    icon: 'el-icon-star-off',
    description: '参与社区活动、提供志愿服务'
  }
]

function selectIdentity(value) {
  emit('update:selected-identity', value) // 使用短横线命名
}
</script>

<style scoped>
.identity-options {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 1.5rem;
  margin: 2rem 0;
}

.identity-option {
  border: 1px solid #ebeef5;
  border-radius: 8px;
  padding: 1.5rem;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s;
  background: white;
}

.identity-option:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}

.identity-option.active {
  border-color: #409eff;
  background-color: #f0f7ff;
}

.identity-option i {
  font-size: 3rem;
  color: #409eff;
  margin-bottom: 1rem;
  display: block;
}

.identity-option h4 {
  margin: 0.5rem 0;
  font-size: 1.2rem;
}

.identity-option p {
  color: #777;
  margin: 0;
  font-size: 0.9rem;
}
</style>
<!--&lt;!&ndash; @/views/Guide/components/StepIdentity.vue &ndash;&gt;-->
<!--<template>-->
<!--  <div class="step-content">-->
<!--    <h3>请选择您的身份</h3>-->
<!--    <p class="tip">身份选择后不可修改，请谨慎选择</p>-->
<!--    &lt;!&ndash; 改成使用计算属性 + emit &ndash;&gt;-->
<!--    <el-radio-group :model-value="selectedIdentity" @update:modelValue="$emit('update:selectedIdentity', $event)">-->
<!--      <el-radio :label="1" class="identity-option">-->
<!--        <div class="identity-card">-->
<!--          <i class="el-icon-user-solid identity-icon"></i>-->
<!--          <h4>老人</h4>-->
<!--          <p>使用健康监测、紧急呼叫等服务</p>-->
<!--        </div>-->
<!--      </el-radio>-->

<!--      <el-radio :label="2" class="identity-option">-->
<!--        <div class="identity-card">-->
<!--          <i class="el-icon-user identity-icon"></i>-->
<!--          <h4>家属</h4>-->
<!--          <p>为老人预约服务、查看健康数据</p>-->
<!--        </div>-->
<!--      </el-radio>-->

<!--      <el-radio :label="3" class="identity-option">-->
<!--        <div class="identity-card">-->
<!--          <i class="el-icon-star-off identity-icon"></i>-->
<!--          <h4>志愿者</h4>-->
<!--          <p>参与社区活动、提供志愿服务</p>-->
<!--        </div>-->
<!--      </el-radio>-->
<!--    </el-radio-group>-->

<!--    <div class="step-buttons">-->
<!--      <el-button type="primary" @click="nextStep" :disabled="!selectedIdentity">-->
<!--        下一步-->
<!--      </el-button>-->
<!--    </div>-->
<!--  </div>-->
<!--</template>-->

<!--<script setup>-->
<!--defineProps({-->
<!--  selectedIdentity: {-->
<!--    type: Number,-->
<!--    required: true-->
<!--  }-->
<!--})-->

<!--defineEmits(['update:selectedIdentity', 'next'])-->
<!--</script>-->
